<template>
  <div>
    <header-m></header-m>
    <div class="form">
      <el-form :model="baseInfo" ref="baseForm" :rules="Rules">
        <el-form-item label="身份证：" prop="idCard">
          <el-input v-model="baseInfo.idCard" />
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="baseInfo.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="submit" class="denglu" @click="buy()">支付</el-button>
        </el-form-item>
      </el-form>
      <div v-if="this.$store.state.address!=''">
        默认地址为{{this.$store.state.address}}
      </div>
      <div v-else>
        默认地址为空
      </div>
      <div><span @click="choose">另选地址</span></div>
    </div>
  </div>
</template>
<script>
import headerM from "../components/HeaderM";
export default {
  data() {
    return {
      Rules: {
        idCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
          { pattern: /(^\d{17}(\d|X|x)$)/, message: "身份证不符合规范" },
        ],
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          { pattern: /^[\u4e00-\u9fa5$]{2,13}$/, message: "姓名不符合规范" },
        ],
      },
      baseInfo: {
        idCard: "",
        name: "",
      },
      // 用户id
      userid: this.$store.state.userId,
      // 演出id
      perid: this.$store.state.id,
      // 预购票数量
      ticketNum: this.$store.state.ticketNum,
      // 预购票种类
      ticketId: this.$store.state.ticketId,
      // 已购票数量
      content: this.$store.state.ticketedNum,
      // 预购票价格
      price:this.$store.state.price,
      // 预购票分区
      seat:this.$store.state.seat,
    };
  },
  mounted() {
    console.log("演出" + this.perid);
    console.log("用户" + this.userid);
    console.log("购买数量" + this.ticketNum);
    console.log("购买票档" + this.ticketId);
    console.log("已购票" + this.content);
  },
  methods: {
    choose(){
      location.href="#/address"
    },
    buy() {
      // 在库中去除购买票量
      this.axios.get("/deltick?id=" + this.ticketId).then((res) => {
        if (res.data.result[0].content >= this.ticketNum) {
          let num = res.data.result[0].content - this.ticketNum;
          this.axios
            .post("/deltick", "id=" + this.ticketId + "&num=" + num)
            .then((res) => {
              // 购票(没买过票)
              if (this.content == 0) {
                this.axios
                  .post(
                    "/buy",
                    "userid=" +
                      this.userid +
                      "&perid=" +
                      this.perid +
                      "&ticketid=" +
                      this.ticketId +
                      "&content=" +
                      this.ticketNum+
                      "&price="+this.price+"&seat="+this.seat
                  )
                  .then((res) => {
                    this.$message({
                      message: res.data.msg,
                      duration: 1000,
                      type: "success",
                    });
                    history.go(-1);
                  });
              } else {
                // 买过此票
                let content = this.ticketNum + this.content;
                this.axios
                  .post(
                    "/buy2",
                    "userid=" +
                      this.userid +
                      "&perid=" +
                      this.perid +
                      "&ticketid=" +
                      this.ticketId +
                      "&content=" +
                      content
                  )
                  .then((res) => {
                    this.$message({
                      message: res.data.msg,
                      duration: 1000,
                      type: "success",
                    });
                    history.go(-1);
                  });
              }
            });
        } else {
          this.$message({
            message: "哎呀，票票被抢走了",
          });
        }
      });
    },
  },
  components: {
    headerM,
  },
};
</script>
<style scoped>
.form {
  margin-top: 10px;
}
.form >>> .el-form-item {
  margin: 0;
  height: 60px;
}
.form >>> .el-form-item .el-form-item__label {
  float: left;
  width: 25%;
  font-size: 16px;
  text-align: right;
  padding-top: 5px;
}
.form >>> .el-form-item .el-form-item__content {
  float: right;
  width: 70%;
  height: 30px;
  margin-right: 5%;
}
.form >>> .el-form-item .el-form-item__content .el-form-item__error {
  top: 40px;
  left: 20px;
}

.form >>> .el-form-item .el-form-item__content .el-input__inner {
  border-top: transparent;
  border-left: transparent;
  border-radius: 0;
  height: 30px;
  width: 90%;
  border-right: transparent;
  font-size: 18px;
  padding-top: 0;
}
.form .denglu {
  width: 80%;
  margin-right: 20%;
  background-image: linear-gradient(90deg, #ff4aae, #ff1268);
  color: white;
  font-size: 18px;
  border: none;
}
</style>